<template>
  <van-card
    class="goods-item"
    :title="title"
    :desc="description"
    :price="price"
    :tag="tag"
    @click="onClick"
  >
    <template #thumb>
      <scale-image
        v-if="thumb"
        :src="path"
        :ratio="1.618"
        radius="3px"
        :icon="mediaFormatIcon"
        iconSize="large"
      />
    </template>
  </van-card>
</template>

<script>
import ScaleImage from '@/components/scaleImage'
export default {
  components: {
    ScaleImage
  },
  name: 'default',
  props: {
    data: {
      type: Object
    },
    title: {
      type: String,
      default: ''
    },
    thumb: Object,
    description: {
      type: String,
      default: ''
    },
    price: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    path () {
      if (this.thumb) {
        return this.thumb.path
      }
      return ''
    },
    mediaFormatIcon () {
      if (this.thumb && this.thumb.format === 'video') {
        return '/static/icons/video.png'
      }
      return ''
    }
  },
  methods: {
    // 上拉加载
    onClick () {
      this.$emit('click', this.data)
    }
  }
}
</script>

<style lang="less" scoped>
.goods-item {
  padding: 10px 15px;
  /deep/ .van-card {
    &__thumb {
      width: 30%;
      height: auto;
    }
  }
  &-title {
    padding: 20px 15px;
    color: #fff;
    h2 {
      margin: 0 0 15px;
      padding-bottom: 30px;
      font-size: 26px;
      position: relative;
      b {
        position: absolute;
        display: block;
        left: 0;
        top: 40%;
        transform: scale(1.3);
        opacity: 0.2;
        text-transform: uppercase;
        transform-origin: left bottom;
      }
      &::after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1em;
        height: 2px;
        background: #fff;
        display: block;
        content: "";
      }
    }
    p {
      font-family: "微软雅黑";
      opacity: 0.9;
      font-size: 14px;
    }
  }
}
</style>
